// 公共样式文件

// 颜色变量
$primary-color: #2196F3;
$success-color: #4CAF50;
$warning-color: #FF9800;
$error-color: #f44336;
$info-color: #2196F3;

$text-color-primary: #333;
$text-color-secondary: #666;
$text-color-placeholder: #999;

$background-color: #f5f6fa;
$card-background: #ffffff;
$border-color: #e0e0e0;

// 间距变量
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 12px;
$spacing-lg: 16px;
$spacing-xl: 20px;
$spacing-xxl: 24px;

// 圆角变量
$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 12px;
$border-radius-xl: 16px;

// 阴影变量
$box-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
$box-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
$box-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);

// 字体大小
$font-size-xs: 10px;
$font-size-sm: 12px;
$font-size-md: 14px;
$font-size-lg: 16px;
$font-size-xl: 18px;
$font-size-xxl: 20px;
$font-size-title: 24px;

// 公共类
.flex {
	display: flex;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-1 {
	flex: 1;
}

// 文本对齐
.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

// 文本颜色
.text-primary {
	color: $primary-color;
}

.text-success {
	color: $success-color;
}

.text-warning {
	color: $warning-color;
}

.text-error {
	color: $error-color;
}

.text-secondary {
	color: $text-color-secondary;
}

.text-placeholder {
	color: $text-color-placeholder;
}

// 背景颜色
.bg-primary {
	background-color: $primary-color;
}

.bg-success {
	background-color: $success-color;
}

.bg-warning {
	background-color: $warning-color;
}

.bg-error {
	background-color: $error-color;
}

.bg-white {
	background-color: #ffffff;
}

.bg-gray {
	background-color: #f5f5f5;
}

// 间距类
.m-xs { margin: $spacing-xs; }
.m-sm { margin: $spacing-sm; }
.m-md { margin: $spacing-md; }
.m-lg { margin: $spacing-lg; }
.m-xl { margin: $spacing-xl; }

.mt-xs { margin-top: $spacing-xs; }
.mt-sm { margin-top: $spacing-sm; }
.mt-md { margin-top: $spacing-md; }
.mt-lg { margin-top: $spacing-lg; }
.mt-xl { margin-top: $spacing-xl; }

.mb-xs { margin-bottom: $spacing-xs; }
.mb-sm { margin-bottom: $spacing-sm; }
.mb-md { margin-bottom: $spacing-md; }
.mb-lg { margin-bottom: $spacing-lg; }
.mb-xl { margin-bottom: $spacing-xl; }

.ml-xs { margin-left: $spacing-xs; }
.ml-sm { margin-left: $spacing-sm; }
.ml-md { margin-left: $spacing-md; }
.ml-lg { margin-left: $spacing-lg; }
.ml-xl { margin-left: $spacing-xl; }

.mr-xs { margin-right: $spacing-xs; }
.mr-sm { margin-right: $spacing-sm; }
.mr-md { margin-right: $spacing-md; }
.mr-lg { margin-right: $spacing-lg; }
.mr-xl { margin-right: $spacing-xl; }

.p-xs { padding: $spacing-xs; }
.p-sm { padding: $spacing-sm; }
.p-md { padding: $spacing-md; }
.p-lg { padding: $spacing-lg; }
.p-xl { padding: $spacing-xl; }

.pt-xs { padding-top: $spacing-xs; }
.pt-sm { padding-top: $spacing-sm; }
.pt-md { padding-top: $spacing-md; }
.pt-lg { padding-top: $spacing-lg; }
.pt-xl { padding-top: $spacing-xl; }

.pb-xs { padding-bottom: $spacing-xs; }
.pb-sm { padding-bottom: $spacing-sm; }
.pb-md { padding-bottom: $spacing-md; }
.pb-lg { padding-bottom: $spacing-lg; }
.pb-xl { padding-bottom: $spacing-xl; }

.pl-xs { padding-left: $spacing-xs; }
.pl-sm { padding-left: $spacing-sm; }
.pl-md { padding-left: $spacing-md; }
.pl-lg { padding-left: $spacing-lg; }
.pl-xl { padding-left: $spacing-xl; }

.pr-xs { padding-right: $spacing-xs; }
.pr-sm { padding-right: $spacing-sm; }
.pr-md { padding-right: $spacing-md; }
.pr-lg { padding-right: $spacing-lg; }
.pr-xl { padding-right: $spacing-xl; }

// 圆角类
.rounded-sm {
	border-radius: $border-radius-sm;
}

.rounded-md {
	border-radius: $border-radius-md;
}

.rounded-lg {
	border-radius: $border-radius-lg;
}

.rounded-xl {
	border-radius: $border-radius-xl;
}

.rounded-full {
	border-radius: 50%;
}

// 阴影类
.shadow-sm {
	box-shadow: $box-shadow-sm;
}

.shadow-md {
	box-shadow: $box-shadow-md;
}

.shadow-lg {
	box-shadow: $box-shadow-lg;
}

// 字体大小类
.text-xs {
	font-size: $font-size-xs;
}

.text-sm {
	font-size: $font-size-sm;
}

.text-md {
	font-size: $font-size-md;
}

.text-lg {
	font-size: $font-size-lg;
}

.text-xl {
	font-size: $font-size-xl;
}

.text-xxl {
	font-size: $font-size-xxl;
}

.text-title {
	font-size: $font-size-title;
}

// 字体粗细
.font-normal {
	font-weight: normal;
}

.font-bold {
	font-weight: bold;
}

// 卡片样式
.card {
	background-color: $card-background;
	border-radius: $border-radius-lg;
	box-shadow: $box-shadow-md;
	padding: $spacing-xl;
	margin-bottom: $spacing-lg;
}

// 按钮样式
.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: $spacing-md $spacing-xl;
	border-radius: $border-radius-md;
	font-size: $font-size-md;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease;
	
	&.btn-primary {
		background-color: $primary-color;
		color: #ffffff;
	}
	
	&.btn-success {
		background-color: $success-color;
		color: #ffffff;
	}
	
	&.btn-warning {
		background-color: $warning-color;
		color: #ffffff;
	}
	
	&.btn-error {
		background-color: $error-color;
		color: #ffffff;
	}
	
	&.btn-outline {
		background-color: transparent;
		border: 1px solid $border-color;
		color: $text-color-primary;
	}
	
	&.btn-sm {
		padding: $spacing-sm $spacing-md;
		font-size: $font-size-sm;
	}
	
	&.btn-lg {
		padding: $spacing-lg $spacing-xxl;
		font-size: $font-size-lg;
	}
}

// 输入框样式
.input {
	width: 100%;
	padding: $spacing-md;
	border: 1px solid $border-color;
	border-radius: $border-radius-md;
	font-size: $font-size-md;
	color: $text-color-primary;
	background-color: #ffffff;
	
	&:focus {
		border-color: $primary-color;
		outline: none;
	}
	
	&::placeholder {
		color: $text-color-placeholder;
	}
}

// 分割线
.divider {
	height: 1px;
	background-color: $border-color;
	margin: $spacing-lg 0;
}

// 加载状态
.loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: $spacing-xl;
	color: $text-color-secondary;
}

// 空状态
.empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: $spacing-xxl;
	color: $text-color-secondary;
	
	.empty-icon {
		font-size: 48px;
		margin-bottom: $spacing-md;
		opacity: 0.5;
	}
	
	.empty-text {
		font-size: $font-size-md;
	}
}
